<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table{
        width: 500px;
        text-align: center;
        margin: 300px auto;
    }
    th{
        height: 30px;
        border: 1px solid black;
        background: #999999;
    }
    td{
        border: 1px solid black;
        height: 25px;
    }
</style>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        var datas = [{
            name: '张三',
            sub: 'JavaScript',
            score: 100
        },{
            name: '张一山',
            sub: 'JavaScript',
            score: 98
        },{
            name: '老马',
            sub: 'JavaScript',
            score: 99
        },{
            name: '小宏',
            sub: 'JavaScript',
            score: 95
        },{
            name: '阿强',
            sub: 'JavaScript',
            score: 97
        }];
        var tbody = document.querySelector('tbody');
        for (var i = 0;i < datas.length;i++) {      //外循环管行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //行里面创建单元格 td 单元格的数量取决于每个对象里面属性的个数 循环遍历对象 datas[i]
            for (var k in datas[i]){        //内循环管列
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];     //把对象里面的属性值datas[i][k]给td
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        var as = document.querySelectorAll('a');
        for (var i = 0;i < as.length;i++) {
            as[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>
</html>